<template>
    <rx-layout>
        <div slot="header" style="display: flex">
            <div class="refererEdit-header">{{i18n('list.comment','Referer白名单配置')}}</div>
            <a-button icon="save" @click="saveProps" type="primary">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
        </div>
        <div slot="center" style="padding:20px;">
            <div style="width: 70%">
                <div class="refererEdit-center">
                    <div style="color: #303030;">{{i18n('form.isReferer','是否开启上传白名单:')}}</div>
                    <div><a-switch v-model="isReferer"/></div>
                </div>
                <div class="refererEdit-center-header">
                    <div><span @click="addRecord" style="cursor: pointer"><my-icon type="iconxinzeng"></my-icon><span>{{i18n('form.addWhitelist','新增白名单')}}</span></span></div>
                    <div style="cursor: pointer" @click="delRecord(true)"><my-icon type="iconqingchu"></my-icon>{{i18n('form.clear','清除')}}</div>
                </div>
                <div style="margin-top: 17px">
                    <div class="refererEdit-common" v-for="(record,index) in refererList" :key="index">
                        <my-icon @click="delRecord(false,index)" type="iconoffline" style="cursor: pointer"></my-icon>
                        <a-input maxLength="100" :placeholder="i18n('form.format','格式为:')"
                                 v-model="record.refererUrl"/>
                    </div>
                </div>
            </div>
            <div v-if="refererList.length==0" style="width: 70%;margin-top: 100px">
                <a-empty />
            </div>
        </div>
    </rx-layout>
</template>

<script>
    import SysPropertiesApi from '@/api/system/core/sysProperties';

    export default {
        name: "RefererEdit",
        data() {
            return {
                panelActiveKeys: ['1', '2', '3', '4'],
                labelCol: {span: 6},
                wrapperCol: {span: 18},
                refererList: [],
                refererListColumns: [
                    {
                        title: this.$ti18('rxList.index','序号'),
                        type: 'indexColumn',
                        width: 30,
                        dataIndex: 'serial',
                        scopedSlots: {
                            customRender: 'serial'
                        }
                    },
                    {
                        title: this.$ti18('rxList.select','选择'),
                        dataIndex: 'select',
                        width: 30,
                        allowCellEdit: false,
                        scopedSlots: {
                            customRender: 'select'
                        }
                    },
                    {
                        title: this.i18n('form.refererUrl','域名或IP'),
                        dataIndex: 'refererUrl',
                        allowCellEdit: false,
                        width: 130,
                        scopedSlots: {
                            customRender: 'refererUrl'
                        }
                    },
                    {
                        title: this.$ti18('rxList.action','操作'),
                        dataIndex: 'action',
                        width: 30,
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                isReferer: 'false',
            }
        },
        created() {
            this.getRefererConfig();
        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"Referer",key);
            },
            getRefererConfig(){
                let self_=this;
                SysPropertiesApi.getRefererConfig().then(res => {
                    var config = res.data;
                    if(!config){
                        return;
                    }
                    self_.isReferer=config.isReferer;
                    config.refererList.map(item => {
                        let obj={
                            select: "NO",
                            refererUrl: item,
                            isErroUrl:false
                        }
                        self_.refererList.push(obj);
                    });
                });
            },
            checkRefererUrl(record){
                if(!record.refererUrl ||
                    (record.refererUrl.indexOf("http://")!=0 &&
                        record.refererUrl.indexOf("https://")!=0)){
                    record.isErroUrl=true;
                    return record.isErroUrl;
                }
                let refererUrls=[];
                if(record.refererUrl.indexOf("http://")==0){
                    refererUrls= record.refererUrl.split("http://");
                }else {
                    refererUrls= record.refererUrl.split("https://");
                }

                if(!refererUrls[1]){
                    record.isErroUrl=true;
                    return record.isErroUrl;
                }

                record.isErroUrl=false;
                return record.isErroUrl;
            },
            addRecord() {
                this.refererList.push({select: "NO", refererUrl: "",isErroUrl:false});
            },
            delRecord(show,index){
                if(show){
                    this.refererList = [];
                }else {
                    this.refererList.splice(index,1)
                }
            },
            selectChange(record, key) {
                if (record[key] == 'NO') {
                    record[key] = 'YES';
                } else {
                    record[key] = 'NO';
                }
            },
            //保存配置
            saveProps: function () {
                let self_=this;
                let referer = {
                    isReferer: self_.isReferer,
                    refererList: []
                };
                let errorUrlList = [];
                self_.refererList.map(item => {
                    if(item.refererUrl){
                        referer.refererList.push(item.refererUrl);
                    }

                });
                SysPropertiesApi.saveReferer(referer);
            }
        }
    }
</script>

<style scoped>
.refererEdit-common{
    display: flex;
    margin-bottom: 10px;
}
.refererEdit-common i{
    font-size: 18px;
    margin-right: 5px;
    margin-top: 7px;
}
.refererEdit-common input{
    flex: 1;
}
.refererEdit-center-header{
    display: flex;
    border-bottom: dashed 1px #dedede;
    height: 50px;
    line-height:50px ;
    font-size: 15px;
}
.refererEdit-center-header >div:nth-child(1){
    color: #303030;
    flex: 1;
}
.refererEdit-center-header >div:nth-child(2){
    color: #f94765;
    font-size: 15px;
}
.refererEdit-center-header >div:nth-child(2) i{
    margin-left: 5px;
    font-size: 18px;
}
.refererEdit-center-header >div:nth-child(1) i{
    margin-right: 5px;
    color: #303030;
    font-size: 17px;
}
.refererEdit-center{
    display: flex;
}
.refererEdit-center >div:nth-child(1){
    margin-right: 10px;
}
.refererEdit-header{
    flex: 1;
    font-size: 16px;
    line-height: 30px;
    color: #101010;
    margin-left: 10px;
}
.aButton{
    margin-right: 10px;
    margin-bottom: 10px;
}
.erroUrlClass{
    color:red;
    display: block;
    font-size: 11px;
}
</style>